import React from 'react'
import { bool, func, node, string } from 'prop-types'
import { NavBarWrapper,NavBarLeft,NavBarTitle,NavBarRight } from './styledNavBar'
import Icon from '../icon/Icon'

export default function NavBar({
    title,
    leftText,
    rightText,
    leftArrow,
    fixed,
    clickLeft,
    clickRight,
    leftCount,
    rightCount
}) {
    return (
        <NavBarWrapper
        fixed = { fixed }
        >
            {
                
                leftCount ? (
                    leftCount
                ) : (
                    <NavBarLeft
                        leftArrow = { leftArrow }
                        onClick = { clickLeft }
                        >
                            { leftArrow && <Icon name='arrowLeftLine' size = '.18rem'></Icon>}
                            <span>
                                { leftText }
                            </span>
                    </NavBarLeft>
                )
            }
            
            <NavBarTitle>
                { title }
            </NavBarTitle>
            {
                rightCount ? (
                    rightCount
                ) : (
                    <NavBarRight
                    onClick = { clickRight }
                    >
                        <span>
                            { rightText }
                        </span>
                    </NavBarRight>
                )
            }
            
        </NavBarWrapper>
    )
}

NavBar.defaultProps = {
    fixed: false,
    leftText: '',
    rightText: '',
    leftArrow: false,
    title: ''
}

NavBar.propTypes = {
    fixed: bool,
    leftText: string,
    rightText: string,
    leftArrow: bool,
    title: string,
    clickLeft: func,
    clickRight: func,
    leftCount: node,
    rightCount: node
}